<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect } from 'vue'
import {
    Search,
} from '@element-plus/icons-vue'
import shipImg from '../assets/img/ship.png'
import bargeShipImg from '../assets/img/barge_ship.png'
import chun from '../stores/chun.js'
import closeIcon from '../assets/img/close.png'
import chunDialog from '../components/chun-dialog.vue'
import { SelectByStateAndDate, upload, updateRecord, getDisposalRecord, getAllRecord, getAllDisposalRecord, deleteRecordById, getBargeShip, getFisherShip, getArea, getYesterdayRecord } from '../network/net.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const url = import.meta.env.VITE_backurl;


// const wtgStr = "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1993bdfa3bc3efd62931de2ee5800a45b891a2a97fe4100a92df362903f97f01"
// const wshStr = "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng786351583280fdd66ed8f0621b5d89b3b72c1213fa75972bdc164ad89ffeb36a"
// const ytgStr = "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng26454dc73575905aa3f303ecbbfac1a78bd8a1c942981d86033a4d51fba786c8"

onMounted(() => {
    // searchDate默认今天
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    if (month < 10) {
        month = `0${month}`
    }
    if (day < 10) {
        day = `0${day}`
    }
    searchDate.value = `${year}-${month}-${day}`

    // 监听鼠标点击事件，点击除了i_a 和输入框之外的地方，activeCell清空
    document.addEventListener('click', (e) => {
        if (!e.target.classList.contains('i_a') && !e.target.classList.contains('el-input__inner')) {
            activeCell.idx = null
            activeCell.type = null
        }
    })

    getBargeShip().then(res => {
        if (res.data.code === 200) {
            bargeShips.value = res.data.data.map(item => {
                return {
                    value: item.name,
                    label: item.name,
                }
            })
        }
    }).catch(err => {
        console.log(err)
    })

    getFisherShip().then(res => {
        if (res.data.code === 200) {
            fisherShips.value = res.data.data.map(item => {
                return {
                    value: item.name,
                    label: item.name,
                    seaArea: item.seaArea
                }
            })
        }
    }).catch(err => {
        console.log(err)
    })

    getArea().then(res => {
        if (res.data.code === 200) {
            areas.value = res.data.data.map(item => {
                return {
                    value: item.name,
                    label: item.name
                }
            })
        }
    }).catch(err => {
        console.log(err)
    })

})

const bargeShips = ref([])
const fisherShips = ref([])
const areas = ref([])

let searchStr = ref('')
const state = ref('全部状态')
const searchDate = ref('')
// 正在查看详情的数据
const detailNum = ref(null)
const handleDetail = (idx) => {
    if (detailNum.value === idx) {
        detailNum.value = null
    } else {
        detailNum.value = idx
    }
}

// 未录入完成、待确认、待审核、完成

let colors = {
    '未录入完成': '#909399',
    '待确认': 'rgba(254, 123, 122, 1)',
    '待审核': 'rgba(247, 188, 92, 1)',
    '完成': 'rgba(122, 150, 246, 1)'
}

const infoData = ref([
    // {
    //     date: '2024-05-12 18:00:00',
    //     bargeShip: '船A 3210001',
    //     fisherShip: '小船1',
    //     audit: '路人甲,路人乙',
    //     weight: '36',
    //     salvageArea: 'sea1',
    //     disposal: '33',
    //     disposalMethod: '随机',
    //     pics: [
    //         'https://7n.w3cschool.cn/statics/images/logonew2.png'
    //     ],
    //     state: '未录入完成',
    //     ymState: '拒绝',
    //     ymText: '拒绝原因',
    // }
])



const infoDataComputed = computed(() => {
    return infoData.value.filter(item => {
        if (state.value === '全部状态') {
            return true
        } else {
            return item.state === state.value
        }
    })
        .filter(item => {
            if (searchStr.value === '') {
                return true
            } else {
                return item.bargeShip.includes(searchStr.value) || item.fisherShip.includes(searchStr.value)
            }
        })
})

const handleCF = (idx, picIdx) => {
    // infoData.value[idx].pics.splice(picIdx, 1)
    let imgArr = infoData.value[idx].pics.split(',')
    imgArr.splice(picIdx, 1)
    infoData.value[idx].pics = imgArr.join(',')
}

// 将图片地址转为base64
const getBase64 = (file) => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => resolve(reader.result)
        reader.onerror = error => reject(error)
    })
}

function urlToBase64(url) {
    return new Promise((resolve, reject) => {
        // 创建一个新的Image对象  
        const img = new Image();
        img.onload = () => {
            // 创建一个canvas元素  
            const canvas = document.createElement('canvas');
            // 设置canvas的宽度和高度为图片的宽度和高度  
            canvas.width = img.width;
            canvas.height = img.height;

            // 将图片绘制到canvas上  
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, img.width, img.height);

            // 使用canvas的toDataURL方法将图片转换为Base64编码的字符串  
            const base64 = canvas.toDataURL('image/png'); // 或者 'image/jpeg' 取决于你需要的格式  

            // 清理canvas，释放内存（可选）  
            canvas.width = canvas.height = 0;

            // 解析Base64字符串（可选），返回data:URL中的Base64部分  
            const base64Image = base64.replace(/^data:image\/(png|jpg);base64,/, "");

            // 解析Promise  
            resolve(base64Image);
        };
        img.onerror = reject; // 如果图片加载失败，则拒绝Promise  

        // 设置图片源为提供的URL  
        img.src = url;
    });
}

const dialogVisible = ref(false)

const ymOne = ref()
const handleYc = (item) => {
    ymOne.value = item
    ymOne.value.ymState = '同意'
    dialogVisible.value = true
}

const dialogVisibleSh = ref(false)
const handleSh = (item) => {
    if (confirm("确认要通过么？")) {
        let newItem = JSON.parse(JSON.stringify(item))
        newItem.state = '完成'
        updateRecord(newItem).then(res => {
            if (res.data.code == 200) {
                laqu(searchDate.value)
            }
        }).catch(err => {
            console.log(err);
        })
    }
}

const activeCell = reactive({
    idx: null,
    type: null
})
const handleActive = (idx, type) => {
    if ((chun.userInfo.role == 'jh' && infoData.value[idx].state == '未录入完成') || (chun.userInfo.role == 'jg' && infoData.value[idx].ymState != '同意' && infoData.value[idx].state == '待审核')) {
        activeCell.idx = idx
        activeCell.type = type
    }

    console.log(activeCell);
}

const handleFileChange = (event, id) => {
    // fileList.value = event.target.files
    // 判断和fileList中是否有重复的文件
    // for (let i = 0; i < event.target.files.length; i++) {
    //     let flag = false
    //     for (let j = 0; j < fileList.value.length; j++) {
    //         if (event.target.files[i].name === fileList.value[j].name) {
    //             flag = true
    //             break
    //         }
    //     }
    //     if (!flag) {
    //         // fileList.value.push(event.target.files[i])
    //         console.log(event.target.files[i]);
    //     }
    // }

    let idx = infoData.value.findIndex(item => item.id === id)


    for (let i = 0; i < event.target.files.length; i++) {
        let file = event.target.files[i]
        let formData = new FormData()
        formData.append('file', file)
        upload(formData).then(res => {
            if (res.data.code == 200) {
                let imgArr = infoData.value[idx].pics.split(',')
                // 去除空字符串
                imgArr = imgArr.filter(item => item !== '')
                imgArr.push(res.data.data)
                infoData.value[idx].pics = imgArr.join(',')
            }
        }).catch(err => {
            console.log(err);
        })

    }
}

let activeId = ref(null)
const handleUClick = (item) => {
    activeId.value = item.id
}

const laqu = (newVal) => {
    let data = {
        date: newVal,
        state: '全部状态',
        bargeShip: chun.userInfo.bargeShip,
        fisherShip: chun.userInfo.fisherShip,
        role: chun.userInfo.role,
        username: chun.userInfo.username
    }
    SelectByStateAndDate(data).then(res => {
        if (res.data.code == 200) {
            infoData.value = res.data.data
        }
    }).catch(err => {
        console.log(err);
    })
}

const infoDataCz = ref([])
const laquCz = (newVal) => {
    let data = {
        date: newVal,
        bargeShip: chun.userInfo.bargeShip,
    }
    getDisposalRecord(data).then(res => {
        if (res.data.code == 200) {
            infoDataCz.value = res.data.data
            console.log(infoDataCz.value);
        }
    }).catch(err => {
        console.log(err);
    })
}
const infoType = ref('卸载记录')

watch([searchDate, infoType], (newVal, oldVal) => {
    // laqu(newVal[0])
    if (infoType.value == '卸载记录') {
        laqu(newVal[0])
    } else {
        laquCz(newVal[0])
    }
})

const handleSd = (item) => {
    // 深度拷贝item
    let newItem = JSON.parse(JSON.stringify(item))
    newItem.state = '待确认'
    updateRecord(newItem).then(res => {
        if (res.data.code == 200) {
            laqu(searchDate.value)
        }
    }).catch(err => {
        console.log(err);
    })

}

const handleTj = () => {
    // if (ymOne.value.ymState === '拒绝' && ymOne.value.ymText === '') {
    //     alert('请填写拒绝理由')
    //     return
    // }

    if (ymOne.value.ymState === '拒绝') {
        ymOne.value.state = '待审核'
    } else {
        ymOne.value.state = '完成'
    }
    // ymOne.value.state = '待审核'
    updateRecord(ymOne.value).then(res => {
        if (res.data.code == 200) {
            dialogVisible.value = false
            laqu(searchDate.value)
        }
    }).catch(err => {
        console.log(err);
    })
}

const handleExport = () => {
    // 获取当前设备类型
    let ua = navigator.userAgent
    console.log(ua);
    ElMessageBox.confirm(
        '选择要导出的数据范围?',
        '提示',
        {
            confirmButtonText: '全部',
            cancelButtonText: '最近一天',
            // type: 'warning',
        }
    )
        .then(() => {
            if (infoType.value == '卸载记录') {
                // 提示确定导出么
                if (confirm("确定导出全部卸载数据么？")) {
                    // 导出
                    getAllRecord(chun.userInfo.bargeShip).then(res => {
                        if (ua.includes('Windows')) {
                            window.open(url + res.data.data)
                        } else {
                            wx.miniProgram.navigateTo({ url: "/pages/input/input?link=https://www.oceanread.net:1102" + res.data.data })
                        }
                        // window.open(url + res.data.data)
                    })
                }
            } else {
                if (confirm("确定导出全部处置数据么？")) {
                    // 导出
                    getAllDisposalRecord().then(res => {
                        // window.open(url + res.data.data)
                        if (ua.includes('Windows')) {
                            window.open(url + res.data.data)
                        } else {
                            wx.miniProgram.navigateTo({ url: "/pages/input/input?link=https://www.oceanread.net:1102" + res.data.data })
                        }
                    })
                }
            }
        })
        .catch(() => {
            getYesterdayRecord(chun.userInfo.bargeShip).then(res => {
                // window.open(url + res.data.data)
                if (ua.includes('Windows')) {
                    window.open(url + res.data.data)
                } else {
                    wx.miniProgram.navigateTo({ url: "/pages/input/input?link=https://www.oceanread.net:1102" + res.data.data })
                }
            })
        })
}

const handleDelete = (item) => {
    if (confirm("确定删除么？")) {
        deleteRecordById({ id: item.id }).then(res => {
            if (res.data.code == 200) {
                laqu(searchDate.value)
            }
        }).catch(err => {
            console.log(err);
        })
    }
}

const getNumFour = (num) => {
    // 不够4位的前面补0
    let str = num.toString()
    let len = str.length
    if (len < 4) {
        for (let i = 0; i < 4 - len; i++) {
            str = '0' + str
        }
    }
    return str
}

let remote = ref([])
const remoteMethod = (query) => {
    if (query !== '') {
        remote.value = fisherShips.value.filter(item => {
            return item.value.includes(query)
        })
    } else {
        remote.value = []
    }
}

const minDate = new Date(2023, 0, 1);
const maxDate = new Date(2025, 0, 1);
const currentDate = ref(['2024', '01', '01']);
const currentTime = ref(['00', '00']);
const showBottomDate = ref(false);

const timeConfirm = () => {
    let id = timeItem.value.id
    let item = infoData.value.find(item => item.id === id)
    let arr = item.date.split(' ')
    arr[0] = currentDate.value.join('-')
    item.date = arr.join(' ')
    showBottomDate.value = false
}

const timeCancel = () => {
    showBottomDate.value = false
}

const showBottomTime = ref(false)
const timeConfirm1 = () => {
    let id = timeItem.value.id
    let item = infoData.value.find(item => item.id === id)
    let arr = item.date.split(' ')
    arr[1] = currentTime.value.join(':')
    item.date = arr.join(' ')
    showBottomTime.value = false
}

const timeCancel1 = () => {
    showBottomTime.value = false
}

const timeItem = ref(null)
const handleShowTime = (item) => {
    if (item.state != '未录入完成') {
        return
    }
    showBottomTime.value = true
    timeItem.value = item
    currentTime.value = item.date.split(' ')[1].split(':')
}

const handleShowDate = (item) => {
    if (item.state != '未录入完成') {
        return
    }
    showBottomDate.value = true
    timeItem.value = item
    currentDate.value = item.date.split(' ')[0].split('-')
}

</script>

<template>
    <div id="info">
        <section class="home_title">
            <span>历史记录</span>
        </section>
        <section id="info_s1" style="display: flex;align-items: center;">
            <el-select v-model="infoType" placeholder="请选择" size="" style="width: 120px;margin-right: 10px;">
                <el-option v-for="item in ['卸载记录', '处置记录']" :key="item" :label="item" :value="item" />
            </el-select>
            <el-input class="iii" v-model="searchStr" placeholder="搜索船号" :prefix-icon="Search"
                style="flex: 1;"></el-input>
            <!-- 批量导出按钮 -->
            <el-button type="default" size="small" style="margin-left: 10px;height: 38px;" @click="handleExport"
                v-if="chun.userInfo.role == 'jg' || chun.userInfo.role == 'jh'">批量导出</el-button>
        </section>
        <section id="info_s2">

            <el-select v-model="state" placeholder="请选择" size="" style="width: 120px;" v-if="infoType == '卸载记录'">
                <el-option v-for="item in ['全部状态', '未录入完成', '待确认', '待审核', '完成']" :key="item" :label="item"
                    :value="item" />
            </el-select>
            <el-date-picker v-model="searchDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"
                style="flex: 0.95;"></el-date-picker>
        </section>

        <section id="info_s3">
            <div v-if="infoType == '卸载记录'" v-for="(item, idx) in infoDataComputed" class="info_c">
                <div class="card_h">
                    <img :src="bargeShipImg" alt="">
                    <span style="margin-left: 10px;font-size: 16px;font-weight: 500;">{{ item.bargeShip }}</span>
                    <span style="margin-left: 0px;color: #F56C6C;">-{{ getNumFour(item.bh) }}</span>
                    <div class="ccc">
                        <span :style="{ color: colors[item.state] }">{{ item.state }}
                            <span :style="{ color: item.ymState == '同意' ? '#67C23A' : '#F56C6C' }">{{
                item.state == '待审核' ? `(渔民${item.ymState})` : '' }}</span>

                        </span>
                    </div>
                </div>
                <div class="card_m">
                    <div class="m_item">
                        <div class="i_t">渔船号</div>
                        <!-- <div class="i_v">{{ item.fisherShip }}</div> -->
                        <div class="i_v i_a" @click="handleActive(idx, '渔船号')">
                            <template v-if="activeCell.idx == idx && activeCell.type == '渔船号'">
                                <!-- <el-input v-model="item.fisherShip" style="width: 150px;"></el-input> -->
                                <el-select v-model="item.fisherShip" filterable remote reserve-keyword placeholder="请输入"
                                    :remote-method="remoteMethod" style="width: 150px;">
                                    <el-option v-for="item in remote" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </template>
                            <template v-else>
                                {{ item.fisherShip }}
                            </template>
                        </div>
                    </div>

                    <div class="m_item">
                        <div class="i_t">卸载重量(吨)</div>
                        <div class="i_v i_a" @click="handleActive(idx, '卸载重量')"
                            style="min-width: 40px;text-align: end;">
                            <template v-if="activeCell.idx == idx && activeCell.type == '卸载重量'">
                                <el-input v-model="item.weight" style="width: 100px;"></el-input>
                            </template>
                            <template v-else>
                                {{ item.weight }}
                            </template>
                        </div>
                    </div>

                    <div class="m_item">
                        <div class="i_t">卸载时间</div>
                        <!-- <div class="i_v">{{ item.date }}</div> -->
                        <div class="i_v" style="display: flex;">
                            <div @click="handleShowDate(item)">
                                {{ item.date.split(' ')[0] }}
                            </div>
                            <div style="margin-left: 5px;" @click="handleShowTime(item)">
                                {{ item.date.split(' ')[1] }}
                            </div>
                        </div>
                    </div>
                    <template v-if="idx == detailNum">
                        <div class="m_item">
                            <div class="i_t">有效吊装次数</div>
                            <div class="i_v i_a" @click="handleActive(idx, '有效吊装次数')">
                                <template v-if="activeCell.idx == idx && activeCell.type == '有效吊装次数'">
                                    <el-input v-model="item.num" style="width: 150px;"></el-input>
                                </template>
                                <template v-else>
                                    {{ item.num }}
                                </template>
                            </div>
                        </div>
                        <!-- 稽核人员 -->
                        <div class="m_item">
                            <div class="i_t">稽核人员</div>
                            <div class="i_v i_a" @click="handleActive(idx, '稽核人员')">
                                <template v-if="activeCell.idx == idx && activeCell.type == '稽核人员'">
                                    <el-input v-model="item.audit" style="width: 150px;"></el-input>
                                </template>
                                <template v-else>
                                    {{ item.audit }}
                                </template>
                            </div>
                        </div>
                        <div class="m_item">
                            <div class="i_t">打捞海域</div>
                            <!-- <div class="i_v">{{ item.salvageArea }}</div> -->
                            <div class="i_v i_a" @click="handleActive(idx, '打捞海域')">
                                <template v-if="activeCell.idx == idx && activeCell.type == '打捞海域'">
                                    <!-- <el-input v-model="item.salvageArea" style="width: 150px;"></el-input> -->
                                    <el-select v-model="item.salvageArea" placeholder="请选择" size=""
                                        style="width: 150px">
                                        <el-option v-for="item in areas" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </template>
                                <template v-else>
                                    {{ item.salvageArea }}
                                </template>
                            </div>
                        </div>
                        <div class="m_item" style="display: flex;flex-direction: column;">
                            <div class="i_v" v-for="(pic, picIdx) in (item.pics ? item.pics.split(',') : [])">
                                <img :src="closeIcon" alt=""
                                    style="position: absolute;top: 5px;right: 5px;z-index: 999;height: 30px;"
                                    @click="handleCF(idx, picIdx)"
                                    v-if="chun.userInfo.role == 'jh' && item.state == '未录入完成'">
                                <img :src="url + pic" alt="" style="width: 100%;">
                            </div>
                        </div>
                    </template>
                </div>
                <div class="card_b">
                    <!-- 查看详情和处理 -->
                    <el-button class="xq" type="success" size="" @click="handleDetail(idx)">{{ idx == detailNum ? '收起' :
                '查看详情'
                        }}</el-button>

                    <!-- 稽核人员可用操作 -->
                    <template v-if="chun.userInfo.role == 'jh' && item.state == '未录入完成'">
                        <!-- <el-button type="success" size="" @click="handleUp">上传图片</el-button> -->
                        <div class="blue-button">
                            选择文件
                            <input id="file-input" class="onlyFile" type="file" accept="image/png, image/jpeg"
                                @change="(e) => handleFileChange(e, item.id)" multiple />
                        </div>

                        <!-- 锁定 -->
                        <el-button type="danger" size="" @click="handleSd(item)">锁定</el-button>
                    </template>
                    <!-- 渔船人的操作，确认无误和拒绝 -->
                    <div v-if="chun.userInfo.role == 'ym' && item.state == '待确认'">
                        <el-button type="success" size="" @click="handleYc(item)">确认 / 拒绝</el-button>
                        <!-- <el-button type="danger" size="">拒绝并反馈</el-button> -->
                    </div>
                    <!-- 监管人员的操作 -->
                    <div v-if="chun.userInfo.role == 'jg' && item.state == '待审核'">

                        <el-button type="success" size="" @click="handleSh(item)">审核通过</el-button>
                    </div>

                    <el-button v-if="chun.userInfo.role == 'jg'" type="danger" size="default"
                        @click="handleDelete(item)">删除</el-button>

                </div>
            </div>

            <div v-else v-for="(item, idx) in infoDataCz" class="info_c">
                <div class="card_h">
                    <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf8f6cb33ac1d1e5689cf91f72dcfcd2454aa11d2a1add4b204f0ce3e4efdeace"
                        alt="">
                    <span style="margin-left: 10px;font-size: 16px;font-weight: 500;">{{ item.bargeShip }}</span>
                </div>
                <div class="card_m">

                    <div class="m_item">
                        <div class="i_t">处置重量(吨)</div>
                        <div class="i_v">{{ item.weight }}</div>
                    </div>

                    <div class="m_item">
                        <div class="i_t">处置时间</div>
                        <div class="i_v">{{ item.date }}</div>
                    </div>
                    <div class="m_item">
                        <div class="i_t">处置方式</div>
                        <div class="i_v">{{ item.disposalMethod }}</div>
                    </div>
                    <div class="m_item">
                        <div class="i_t">处置地点</div>
                        <div class="i_v">{{ item.disposalPosition }}</div>
                    </div>
                    <div class="m_item">
                        <div class="i_t">操作人员</div>
                        <div class="i_v">{{ item.audit }}</div>
                    </div>

                </div>
            </div>
        </section>
        <!-- 确认活拒绝的提示框，选择拒绝可以填写拒绝理由 -->
        <el-dialog title="确认录入信息" v-model="dialogVisible">
            <span class="d_tip">您好！您的信息已经录入成功，请及时填写以下信息并及时反馈。</span>
            <div style="display: flex;align-items: center;margin-top: 10px;font-size: 14px;">
                <span>录入信息是否同意？</span>
                <!-- 选择 -->
                <el-radio-group v-model="ymOne.ymState" style="margin-left: 10px;display: flex;align-items: center;">
                    <el-radio label="同意" value="同意">同意</el-radio>
                    <el-radio label="拒绝" value="拒绝">拒绝</el-radio>
                </el-radio-group>
            </div>
            <!-- <div style="margin-top: 10px;" v-show="ymOne.ymState == '拒绝'">
                <el-input v-model="ymOne.ymText" style="width: 100%" :rows="3" type="textarea" placeholder="请输入拒绝理由" />
            </div> -->
            <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;margin-top: 10px;">
                <el-button type="primary" @click="handleTj">提交结果</el-button>
            </span>
        </el-dialog>
        <!-- 审核对话框 -->
        <el-dialog title="审核" v-model="dialogVisibleSh">
            <template>
                <span class="d_tip">您好！渔民已确认录入信息无误。</span>
                <span class="d_tip">您好！渔民拒绝了录入信息，反馈内容如下。</span>
            </template>
            <div style="display: flex;align-items: center;margin-top: 10px;font-size: 14px;">
                <span>审核信息是否同意？</span>
                <!-- 选择 -->
                <el-radio-group v-model="radio" style="margin-left: 10px;display: flex;align-items: center;">
                    <el-radio label="同意">同意</el-radio>
                    <el-radio label="拒绝">拒绝</el-radio>
                </el-radio-group>
            </div>
            <div style="margin-top: 10px;">
                <!-- <el-input v-model="refuseReason" placeholder="请输入拒绝理由"></el-input> -->
                <el-input v-model="rejuctText" style="width: 100%" :rows="3" type="textarea" placeholder="请输入拒绝理由" />
            </div>
            <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;margin-top: 10px;">
                <el-button type="primary" @click="dialogVisibleSh = false">提交结果</el-button>
            </span>
        </el-dialog>


        <van-popup v-model:show="showBottomDate" round position="bottom" :style="{ height: '30%' }"
            @click-overlay="timeConfirm">
            <van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate"
                @confirm="timeConfirm" @cancel="timeCancel" />
        </van-popup>

        <!-- 时间选择弹窗 -->
        <van-popup v-model:show="showBottomTime" round position="bottom" :style="{ height: '30%' }"
            @click-overlay="timeConfirm1">
            <van-time-picker v-model="currentTime" type="time" title="选择时间" @confirm="timeConfirm1"
                @cancel="timeCancel1" />
        </van-popup>
    </div>
</template>

<style lang="less" scoped>
#info {
    background: linear-gradient(180deg, #0FBE8C 0%, #D7F1EF 100%);
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    padding: 50px 15px 0px 15px;
    align-items: center;


    :deep(.el-select__selected-item) {
        width: 100%;
    }

    .onlyFile {
        // display: none;
        height: 100%;
        width: 100%;
        position: absolute;
        overflow: hidden;
        right: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 9999;
    }

    :deep(.el-upload--text) {
        border: none;
    }

    :deep(.el-button) {
        border-radius: 20px;
        border: none;
        width: 92px;
        height: 30px;
    }

    :deep(.xq) {
        background: rgba(7, 190, 166, 0.1);
        border-radius: 20px;
        border: none;
        width: 92px;
        height: 30px;
        color: #07BEA6;

        // 激活状态
        &:active {
            background: rgba(7, 190, 166, 0.2);
        }
    }

    section {
        margin-bottom: 10px;
        width: 100%;
        width: 100%;
    }

    :deep(.el-dialog) {
        width: 80%;
        border-radius: 12px;
        top: 10%;

        .el-dialog__headerbtn {
            height: 30px;
            width: 30px;
        }

        .d_tip {
            font-size: 16px;
            font-weight: 500;
            line-height: 18px;
            color: #999999;
        }
    }

    .blue-button {
        background-color: #12BDA7;
        color: white;
        padding-top: 2px;
        text-align: center;
        border-radius: 20px;
        border: none;
        width: 92px;
        height: 30px;
        font-size: 14px;
    }

    #info_s1 {
        width: 100%;
        // background: #FFFFFF;

        :deep(.el-input__wrapper) {
            border: none;
            border-radius: 19px;
            height: 40px;
        }

        // :deep(.el-input__inner) {
        //     color: #FFFFFF !important;
        // }
    }

    :deep(.el-select__wrapper) {
        height: 40px;
        border: none;
        border-radius: 19px;
    }

    :deep(.el-input__wrapper) {
        // background-color: #F6F6F8;
        border: none;
        border-radius: 19px;
        height: 40px;
        // background: rgba(51,51,51,0.1);
    }

    #info_s2 {
        display: flex;
        justify-content: space-between;

        :deep(.el-select__wrapper) {
            height: 40px;
            border: none;
            border-radius: 19px;
        }

        :deep(.el-input__wrapper) {
            // background-color: #F6F6F8;
            border: none;
            border-radius: 19px;
            height: 40px;
            // background: rgba(51,51,51,0.1);
        }
    }

    #info_s3 {
        flex: 1;
        // background: #FFFFFF;
        margin-bottom: 0;
        overflow: auto;


        .info_c {
            background: #FFFFFF;
            box-shadow: 0px 1px 10px 0px rgba(0, 139, 121, 0.41);
            border-radius: 11px;
            // height: 80px;
            padding: 15px 15px 10px 15px;
            margin-bottom: 15px;

            .card_h {
                display: flex;
                align-items: center;

                .ccc {
                    display: flex;
                    align-items: center;
                    margin-left: auto;
                    margin-right: 0px;


                    span {
                        // color: rgba(254, 123, 122, 1);
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 18px;
                        letter-spacing: 0.5px;
                    }
                }

            }

            .card_m {
                width: 100%;

                .m_item {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10px;

                    .i_t {
                        color: rgba(51, 51, 51, 1);
                        font-size: 16px;
                        font-weight: 500;
                        line-height: 18px;
                    }

                    .i_v {
                        color: rgba(51, 51, 51, 1);
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 18px;
                    }
                }
            }

            .card_b {
                display: flex;
                justify-content: space-between;
                margin-top: 10px;

                el-button {
                    width: 50%;
                    height: 30px;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 18px;
                }
            }
        }
    }
}
</style>